<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>历史数据</span>
        <el-button
          :type="flowStore.loaderType == 'history' ? 'success' : 'primary'"
          size="small"
          :disabled="!content.valid"
          @click="handleLoad"
        >
          <span>{{
            flowStore.loaderType == "history" ? "已加载" : "加载"
          }}</span>
        </el-button>
      </div>
    </template>
    <el-form label-width="80px">
      <el-form-item label="起始小时">
        <el-date-picker
          v-model="formData.date1"
          type="date"
          placeholder=""
          format="YYYY-MM-DD"
          style="width: 160px"
        />
        <span style="padding: 0 8px"></span>
        <el-select v-model="formData.hour1" style="width: 80px">
          <el-option
            v-for="hour in hourList"
            :label="hour + '时'"
            :value="hour"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结束小时">
        <el-date-picker
          v-model="formData.date2"
          type="date"
          placeholder=""
          format="YYYY-MM-DD"
          style="width: 160px"
        />
        <span style="padding: 0 8px"></span>
        <el-select v-model="formData.hour2" style="width: 80px">
          <el-option
            v-for="hour in hourList"
            :label="hour + '时'"
            :value="hour"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-alert
      v-if="!content.valid"
      title="时长应大于1小时, 且起止时间应小于当前时间"
      type="error"
      :closable="false"
      show-icon
    />
  </el-card>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import useFlowStore from "@/store/flow.js";
import dayjs from "dayjs";
import loadData from "./utils/loader.js";

const flowStore = useFlowStore();
const formData = flowStore.loaderConfig.history;

const hourList = ref([]);

const content = computed(() => {
  let nowDay = dayjs();
  let startDay = dayjs(formData.date1).hour(formData.hour1).minute(0).second(0);
  let endDay = dayjs(formData.date2).hour(formData.hour2).minute(0).second(0);
  let before = startDay.isBefore(endDay);
  let length = endDay.diff(startDay, "hour");
  let passed = true;
  // nowDay.isAfter(startDay, "hour") && nowDay.isAfter(endDay, "hour");
  let valid = before && length >= 0 && passed;
  return {
    start: startDay.format("YYYY-MM-DD HH:mm:ss"),
    end: endDay.format("YYYY-MM-DD HH:mm:ss"),
    before,
    length,
    valid,
  };
});

const handleLoad = () => {
  flowStore.loaderType = "history";
  flowStore.autoRefresh = false;
  flowStore.ignoreWarning = true;
  loadData({ start: content.value.start, end: content.value.end }).then(
    (res) => {
      console.log("历史数据", res);
    }
  );
};

onMounted(() => {
  for (let i = 0; i < 23; i++) {
    hourList.value.push(i + 1);
  }
});
</script>

<style scoped>
@import "./styles/card.css";
</style>
